<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动端的页面</title>
    <link rel="stylesheet" href="./css/all.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!--
    https://www.figma.com/file/BmmbVRx6ImTF8NjWTfLdgN/Grocery-App-(Big-Cart)-(Community)?node-id=0%3A1&t=IDqc6HfLposU6pnt-1
-->
<!--底部的菜单-->
<nav class="menu">
    <ul>
        <li>
            <a class="active" href="#">
                <i class="fa-solid fa-home"></i>
            </a>
        </li>

        <li>
            <a href="#">
                <i class="fa-solid fa-user-circle"></i>
            </a>
        </li>

        <li>
            <a href="#">
                <i class="fa-solid fa-heart"></i>
            </a>
        </li>

        <li class="shopping-cart">
            <a href="#">
                <i class="fa-solid fa-shopping-bag"></i>
            </a>
        </li>
    </ul>
</nav>

<form class="search-form" action="#">
    <input type="text" placeholder="请输入关键字">
    <i class="fa-solid fa-search"></i>
    <i class="fa-solid fa-sliders"></i>
</form>


<!--轮播图-->
<div class="page-hero">
    <ul class="img-list">
        <li>
            <a href="#">
                <img src="./images/1.png" alt="demo">
                <h2>首订享受8折优惠！</h2>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="./images/1.png" alt="demo">
                <h2>首订享受8折优惠！</h2>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="./images/1.png" alt="demo">
                <h2>首订享受8折优惠！</h2>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="./images/1.png" alt="demo">
                <h2>首订享受8折优惠！</h2>
            </a>
        </li>
    </ul>

    <!--    导航小点-->
    <div class="pointer">
        <a class="active" href="javascript:"></a>
        <a href="javascript:"></a>
        <a href="javascript:"></a>
        <a href="javascript:"></a>
    </div>
</div>

<!--分类列表-->
<div class="cate-list">
    <header>
        <h3>分类</h3>
        <a href="#">
            <i class="fa-solid fa-angle-right"></i>
        </a>
    </header>

    <ul class="cate-inner">
        <li>
            <a href="#">
                <span class="cate-icon">
                    <i class="fa-solid fa-carrot"></i>
                </span>
                <span class="cate-text">
                    蔬菜
                </span>
            </a>
        </li>

        <li>
            <a href="#">
                <span class="cate-icon">
                    <i class="fa-solid fa-apple-whole"></i>
                </span>
                <span class="cate-text">
                    水果
                </span>
            </a>
        </li>

        <li>
            <a href="#">
                <span class="cate-icon">
                    <i class="fa-solid fa-glass-water"></i>
                </span>
                <span class="cate-text">
                    饮料
                </span>
            </a>
        </li>

        <li>
            <a href="#">
                <span class="cate-icon">
                    <i class="fa-solid fa-carrot"></i>
                </span>
                <span class="cate-text">
                    蔬菜
                </span>
            </a>
        </li>

        <li>
            <a href="#">
                <span class="cate-icon">
                    <i class="fa-solid fa-carrot"></i>
                </span>
                <span class="cate-text">
                    蔬菜
                </span>
            </a>
        </li>

        <li>
            <a href="#">
                <span class="cate-icon">
                    <i class="fa-solid fa-carrot"></i>
                </span>
                <span class="cate-text">
                    蔬菜
                </span>
            </a>
        </li>

        <li>
            <a href="#">
                <span class="cate-icon">
                    <i class="fa-solid fa-carrot"></i>
                </span>
                <span class="cate-text">
                    蔬菜
                </span>
            </a>
        </li>

        <li>
            <a href="#">
                <span class="cate-icon">
                    <i class="fa-solid fa-carrot"></i>
                </span>
                <span class="cate-text">
                    蔬菜
                </span>
            </a>
        </li>

    </ul>
</div>

<!--特色商品-->
<div class="featured-products">
    <header>
        <h3>特色商品</h3>
        <a href="#">
            <i class="fa-solid fa-angle-right"></i>
        </a>
    </header>

    <!--    商品列表-->
    <ul class="products">
        <li>
            <div class="products-info">
                <a href="#">
                    <div class="product-bg"></div>
                    <img src="./images/peach.png" alt="桃">
                    <span class="price">￥8.00</span>
                    <span class="title">鲜桃</span>
                    <span class="unit">公斤</span>
                </a>
                <i class="fa-regular fa-heart"></i>
            </div>
            <div class="add-cart">
                <a href="#">
                    <i class="fa-solid fa-shopping-bag"></i>
                    加入购物车
                </a>
            </div>
        </li>
        <li>
            <div class="products-info">
                <a href="#">
                    <div class="product-bg"></div>
                    <img src="./images/peach.png" alt="桃">
                    <span class="price">￥8.00</span>
                    <span class="title">鲜桃</span>
                    <span class="unit">公斤</span>
                </a>
                <i class="fa-solid fa-heart"></i>
            </div>
            <div class="add-product">
                <i class="fa-solid fa-subtract"></i>
                <span class="count">1</span>
                <i class="fa-solid fa-plus"></i>
            </div>
        </li>
        <li>
            <div class="products-info">
                <a href="#">
                    <div class="product-bg"></div>
                    <img src="./images/peach.png" alt="桃">
                    <span class="price">￥8.00</span>
                    <span class="title">鲜桃</span>
                    <span class="unit">公斤</span>
                </a>
                <i class="fa-regular fa-heart"></i>
            </div>
            <div class="add-cart">
                <a href="#">
                    <i class="fa-solid fa-shopping-bag"></i>
                    加入购物车
                </a>
            </div>
        </li>
        <li>
            <div class="products-info">
                <a href="#">
                    <div class="product-bg"></div>
                    <img src="./images/peach.png" alt="桃">
                    <span class="price">￥8.00</span>
                    <span class="title">鲜桃</span>
                    <span class="unit">公斤</span>
                </a>
                <i class="fa-solid fa-heart"></i>
            </div>
            <div class="add-product">
                <i class="fa-solid fa-subtract"></i>
                <span class="count">1</span>
                <i class="fa-solid fa-plus"></i>
            </div>
        </li>
        <li>
            <div class="products-info">
                <a href="#">
                    <div class="product-bg"></div>
                    <img src="./images/peach.png" alt="桃">
                    <span class="price">￥8.00</span>
                    <span class="title">鲜桃</span>
                    <span class="unit">公斤</span>
                </a>
                <i class="fa-regular fa-heart"></i>
            </div>
            <div class="add-cart">
                <a href="#">
                    <i class="fa-solid fa-shopping-bag"></i>
                    加入购物车
                </a>
            </div>
        </li>
        <li>
            <div class="products-info">
                <a href="#">
                    <div class="product-bg"></div>
                    <img src="./images/peach.png" alt="桃">
                    <span class="price">￥8.00</span>
                    <span class="title">鲜桃</span>
                    <span class="unit">公斤</span>
                </a>
                <i class="fa-solid fa-heart"></i>
            </div>
            <div class="add-product">
                <i class="fa-solid fa-subtract"></i>
                <span class="count">1</span>
                <i class="fa-solid fa-plus"></i>
            </div>
        </li>
    </ul>
</div>
</body>
</html>